<template>
	<view class="conter">
			<view class="body">
				<view class="time_top">
						<u-icon  v-if="orderObj.status == 2" name="checkbox-mark" size="28" color="#46a6f8"></u-icon>
						<view style="margin-top: 8rpx;" v-if="orderObj.status == 2">订单已经取消</view>
						<view style="margin-top: 8rpx;" v-if="orderObj.status == 1">
							藏品预计1-10分钟转入
						</view>
					<image class="top_iocn" v-if="orderObj.status == 0" :src="imgUrl + '/appStatic/images/dengdai.png'"
						mode=""></image>
					<u-count-down @finish="endTimes" v-if="orderObj.status == 0" :time="timeOutSeconds"
						format="HH:mm:ss" autoStart millisecond @change="onChange">
						<view class="time">
							<view class="time__custom">
								<text
									class="time__custom__item">{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}</text>
							</view>
							<text class="time__doc">:</text>
							<view class="time__custom">
								<text
									class="time__custom__item">{{ timeData.minutes > 10 ? timeData.minutes : '0' + timeData.minutes }}</text>
							</view>
							<text class="time__doc">:</text>
							<view class="time__custom">
								<text
									class="time__custom__item">{{ timeData.seconds > 10 ? timeData.seconds : '0' + timeData.seconds }}</text>
							</view>
						</view>
					</u-count-down>
				</view>

				<view class="baby_box">
					<image :src="imgUrl + orderObj.propImg" class="baby_left" mode=""></image>
					<view class="baby_center">
						<view class="top">
							{{ orderObj.propName }}
						</view>
						<view class="btm"></view>
					</view>
					<view class="baby_right">
						<u-icon name="arrow-right" color="#ffffff" size="14"></u-icon>
					</view>
				</view>
				<view class="details_box">
					<text class="tit">订单详情</text>
					<view class="details_label">
						订单金额 :
						<text class="details_value">
							{{ integerPart }}
							<text class="decimal-part">{{ extractDecimalDigits(orderObj.sumPrice) }}</text>
						</text>
					</view>
					<view class="details_label">
						订单号 :
						<text class="details_value">{{ orderObj.orderNo }}</text>
						<image :src="imgUrl+'/static/images/iconimgpopoak47.png'" mode="" @click="clickCopy"
							class="copy"></image>
					</view>
					<view class="details_label">
						创建时间 :
						<text class="details_value">{{ orderObj.orderTime }}</text>
					</view>
				</view>
				<view class="description">
					<view class="">说明：</view>
					<view style="margin-top: 17.44rpx">一、在账号有待支付订单时，不允许购买其他藏品。</view>
					<view style="margin-top: 8.72rpx">二、同一账号一段时间内累计取消3次订单，将会被限购一段时间。</view>
				</view>
			</view>
			<view class="foot" v-if="orderObj.status == 0">
				<view class="cancel" @click="cancel">取消</view>
				<view class="buy" @click="goBuy">立刻支付</view>
			</view>
			<view class="foot" v-if="orderObj.status != 0">
				<view class="cancel" @click="goCollect">藏馆</view>
				<view class="buy" @click="goMarket">继续购买</view>
			</view>
			<!-- 时之沙取消弹窗 -->
			<view class="times_buy" v-show="flag">
				<text class="tmies_tit">取消订单</text>
				<view class="times_num">
					订单一旦取消，无法恢复
					<view class="times_num_2">是否确定取消订单？</view>
				</view>
				<text class="times_total"></text>
				<view class="times_btm">
					<view class="times_btm_left" @click="timesCancel">暂不取消</view>
					<view class="times_btm_right" @click="timesBuy">确定取消</view>
				</view>
			</view>
		</view>
</template>

<script>
	import config from '@/config.js';
	import {
		getOrderDetail,
		goPay,
		cancelOrder
	} from '@/api/work/market.js';
	import constant from '../../utils/constant';
	export default {
		data() {
			return {
				orderObjFlag: false,
				flag: false,
				timeData: {},
				order_flag: false,
				id: '',
				imgUrl: config.gillUrl,
				orderObj: {
					propsNum: '',
					orderNo: '',
					status: '',
					expireTime: '',
					propImg: '',
					orderTime: '',
					id: '',
					sumPrice: '',
					propName: ''
				},
				timeOutSeconds: '',
				payObj: {
					retUrl: '',
					id: ''
				}
			};
		},

		computed: {
			integerPart() {
				return Math.floor(this.orderObj.sumPrice);
			}
		},
		async onLoad(opotions) {
			this.id = opotions.id;
			this.orderDetail();
		},
		methods: {
			extractDecimalDigits(value) {
				const value1 = Number(value).toFixed(2);
				const stringValue = value1.toString(); // 将值转换为字符串
				const decimalIndex = stringValue.indexOf('.'); // 找到小数点的位置
				if (decimalIndex !== -1) {
					const decimalPart = stringValue.substr(decimalIndex + 1, 2); // 提取小数点后俩位
					return '.' + decimalPart;
				} else {
					return ''; // 如果没有小数部分，则返回空字符串
				}
			},
			onChange(e) {
				this.timeData = e;
			},
			endTimes() {
				this.orderObj.status = 2;
			},
			timesCancel() {
				this.flag = false;
			},
			async timesBuy() {
				const res = await cancelOrder(this.orderObj.id);
				if (res.code == 200) {
					this.orderObj.status = 2;
					uni.showToast({
						title: '取消订单成功',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'success'
					});
				}
				this.flag = false;
			},
			async cancel() {
				this.flag = true;
			},
			async orderDetail() {
				const res = await getOrderDetail(this.id);
				if (res.code == 200) {
					this.orderObj.orderNo = res.data.orderNo;
					this.orderObj.status = res.data.status;
					this.orderObj.expireTime = res.data.expireTime;
					this.orderObj.propImg = res.data.propImg;
					this.orderObj.orderTime = res.data.orderTime;
					this.orderObj.id = res.data.id;
					this.orderObj.sumPrice = res.data.sumPrice;
					this.orderObj.propName = res.data.propName;
					const startDate = new Date();
					const endDate = new Date(this.orderObj.expireTime);
					const timeDiff = endDate.getTime() - startDate.getTime(); // 计算时间差
					this.timeOutSeconds = timeDiff;
					this.orderObjFlag = true;
				} else {
					this.orderObjFlag = false;
					this.$modal.showToast('网络波动异常，可在我的订单页面重新付款');
				}
			},
			clickCopy() {
				uni.setClipboardData({
					data: this.orderObj.orderNo, 
					success: () => {
						uni.showToast({
							title: '订单号已复制',
							icon: 'success'
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			async goBuy() {
				this.payObj.retUrl = '';
				this.payObj.id = this.orderObj.id;
				const res = await goPay(this.payObj);
				if (res.code == 200) {
					uni.redirectTo({
						url: '/pages/webView/webView?toUrl=' + res.data + '&payFlag=' + '1' + '&orderId=' +
							this.orderObj.orderNo + '&id=' + this.orderObj.id
					});
				} else {
					uni.showToast({
						title: 'data',
						icon: 'none'
					});
				}
			},
			goMarket() {
				uni.switchTab({
					url: '/pages/work/market'
				});
			},
			goCollect() {
				uni.navigateTo({
					url: '/pages/work/message'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.body {
		margin: 0 34rpx;
		.time_top {
			color: #ffffff;
			margin:0 0 34rpx 0;
			display: flex;
			justify-content: center;
		}
	}
	.baby_box {
		margin-bottom: 38rpx;
		display: flex;
		align-items: center;
		width: 680rpx;
		height: 181rpx;
		background: #130F26;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 1;

		.baby_left {
			margin: 34rpx;
			width: 112rpx;
			height: 112rpx;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			opacity: 1;
		}

		.baby_center {
			width: 440rpx;
			display: flex;
			height: 100%;
			flex-direction: column;
			justify-content: space-evenly;

			.top {
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 400;
				color: #ffffff;
			}

			.btm {
				font-size: 28rpx;
				font-family: 'font';
				font-weight: 400;
				color: #8a92a3;
			}
		}
	}

	::v-deep.u-count-down__text {
		color: #ffffff !important;
	}

	.details_box {
		padding: 17rpx 31rpx 34rpx 34rpx;
		width: 680rpx;
		height: 272rpx;
		background: #130F26;
		box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 1;

		.tit {
			display: block;
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 400;
			color: #ffffff;
			margin-bottom: 34rpx;
		}

		.details_label {
			display: flex;
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 400;
			color: #8a92a3;
			margin-bottom: 17rpx;

			.copy {
				width: 26rpx;
				height: 26rpx;
			}
		}

		.details_value {
			display: block;
			margin-left: 10rpx;
			width: 475rpx;
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 400;
			margin-top: 5rpx;
			.decimal-part {
				font-size: 12px; 
			}
		}
	}

	.description {
		font-size: 21rpx;
		color: #8a92a3;
		margin: 87.21rpx 0rpx 0;
	}

	.foot {
		width: 750rpx;
		height: 155rpx;
		background: #130F26;
		text-align: center;
		position: fixed;
		bottom: 0;
		line-height: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	
		.cancel {
			width: 209rpx;
			height: 77rpx;
			background: #211F30;
			border-radius: 14rpx;
			color: #ffffff;
			font-weight: 700;
			font-size: 28rpx;
			border: 2rpx solid #3C424D;
		}
	
		.buy {
			width: 436rpx;
			height: 77rpx;
			background: #46A6F8;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 14rpx;
			color: #ffffff;
			font-weight: 700;
			font-size: 28rpx
		}
	}

	.time {
		display: flex;
		font-size: 28rpx;
		font-family: 'font';
		font-weight: 400;
		color: red;
		.time__doc {
			margin-right: 10rpx;
			margin-left: 5rpx;
		}
	}

	.times_buy {
		position: absolute;
		top: 400rpx;
		margin-left: 15%;
		width: 70%;
		height: 400rpx;
		background: #0d0e11;
		border-radius: 29rpx 29rpx 29rpx 29rpx;
		border: 2rpx solid #8a92a3;
		display: flex;
		flex-direction: column;
		align-items: center;

		.times_num {
			position: absolute;
			top: 150rpx;
			height: 87rpx;
			font-size: 24rpx;
			font-family: 'font';
			font-weight: 400;
			color: #8a92a3;

			.times_num_2 {
				position: absolute;
				left: 30rpx;
			}

			.times_all {
				width: 120rpx;
				position: absolute;
				top: 10rpx;
				left: 230rpx;
				font-size: 30rpx;
				font-family: 'font';
				font-weight: 400;
				color: #ffffff;
			}
		}

		.tmies_tit {
			margin: 50rpx 0 255rpx 0;
			height: 65rpx;
			font-size: 35rpx;
			font-family: 'font';
			font-weight: 400;
			color: #ffffff;
			line-height: 65rpx;
		}

		.times_total {
			margin-bottom: 34rpx;
			height: 42rpx;
			font-size: 31rpx;
			font-family: 'font';
			font-weight: 400;
			color: #8a92a3;
			line-height: 42rpx;
		}

		.times_btm {
			position: relative;
			top: -140rpx;
			left: 0;
			width: 100%;
			text-align: center;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.times_btm_left {
				font-size: 24rpx;
				font-family: 'font';
				font-weight: 400;
				color: #ffffff;
				line-height: 85rpx;
				width: 200rpx;
				height: 78rpx;
				background: linear-gradient(90deg, #3ADFEB 0%, #4463FF 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
			}

			.times_btm_right {
				font-size: 24rpx;
				font-family: 'font';
				font-weight: 400;
				color: #ffffff;
				line-height: 85rpx;
				width: 200rpx;
				height: 78rpx;
				background: #1c1f25;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
			}
		}
	}

	.top_iocn {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		margin-right: 190rpx;
		margin-top: 2rpx;
	}
</style>